<template>
  <div class="container-set">
    <div class="general-card">
      <div class="general-contain">
        <tiny-layout>
          <tiny-form
            ref="setFormRef"
            :model="state.companyData"
            :rules="rules"
            label-width="80"
            :label-align="true"
            label-position="left"
            size="small"
          >
            <tiny-row :flex="true" justify="left">
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('公司名称')" prop="name">
                  <tiny-input v-model="state.companyData.name"></tiny-input>
                </tiny-form-item>
              </tiny-col>
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('公司简称')" prop="short_name">
                  <tiny-input v-model="state.companyData.short_name"></tiny-input>
                </tiny-form-item>
              </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" justify="left">
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('法人姓名')" prop="legal_person">
                  <tiny-input
                    v-model="state.companyData.legal_person"></tiny-input>
                </tiny-form-item>
              </tiny-col>
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('联系电话')" prop="telephone">
                  <tiny-input v-model="state.companyData.telephone"></tiny-input>
                </tiny-form-item>
              </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" justify="left">
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('公司地址')" prop="address">
                  <tiny-input
                    v-model="state.companyData.address"></tiny-input>
                </tiny-form-item>
              </tiny-col>
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('收货地址')" prop="delivery_address">
                  <tiny-input v-model="state.companyData.delivery_address"></tiny-input>
                </tiny-form-item>
              </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" justify="left">
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('邮政编码')" prop="post_code">
                  <tiny-input
                    v-model="state.companyData.post_code"></tiny-input>
                </tiny-form-item>
              </tiny-col>
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('注册资本')" prop="registered_capital">
                  <tiny-input v-model="state.companyData.registered_capital"></tiny-input>
                </tiny-form-item>
              </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" justify="left">
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('银行账号')" prop="account">
                  <tiny-input
                    v-model="state.companyData.account"></tiny-input>
                </tiny-form-item>
              </tiny-col>
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('联行号')" prop="line_number">
                  <tiny-input v-model="state.companyData.line_number"></tiny-input>
                </tiny-form-item>
              </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" justify="left">
              <tiny-col :span="5" label-width="100px">
                <tiny-form-item :label="$t('开户行名称')" prop="bank_name">
                  <tiny-input
                    v-model="state.companyData.bank_name"></tiny-input>
                </tiny-form-item>
              </tiny-col>
            </tiny-row>
          </tiny-form>
        </tiny-layout>
        <div class="general-btn">
          <tiny-button
            v-permission="'company::add'"
            type="primary"
            native-type="submit"
            @click="handleSubmit"
            >{{ $t('提交') }}
          </tiny-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import {
    Layout as TinyLayout,
    Form as TinyForm,
    FormItem as TinyFormItem,
    Row as TinyRow,
    Col as TinyCol,
    Input as TinyInput,
    Button as TinyButton,
  } from '@opentiny/vue';

  const { t } = useI18n();

  // 加载效果
  const state = reactive<{
    companyData: any;
  }>({
    companyData: {} as any,
  });

  const setFormRef = ref();

  const emit = defineEmits<{
    confirm: [];
  }>();

  // 校验规则
  const rulesType = {
    required: true,
    trigger: 'blur',
  };

  const rules = computed(() => {
    return {
      name: [rulesType],
      short_name: [rulesType],
      legal_person: [rulesType],
      telephone: [rulesType],
      address: [rulesType],
      delivery_address: [rulesType],
      post_code: [rulesType],
      registered_capital: [rulesType],
      account: [rulesType],
      line_number: [rulesType],
      bank_name: [rulesType],
    };
  });

  async function handleSubmit() {
  setFormRef.value
    .validate()
    .then(async () => {
      let data = state.companyData;
      let newTemp = {
        name: data.name,
        short_name: data.short_name,
        legal_person: data.legal_person,
        telephone: data.telephone,
        address: data.address,
        delivery_address: data.delivery_address,
        post_code: data.post_code,
        registered_capital: data.registered_capital,
        account: data.account,
        line_number: data.line_number,
        bank_name: data.bank_name,
      };
      state.companyData = {} as any;
      emit('confirm', newTemp);
     });
 
}
</script>

<style scoped lang="less">
  .container-set {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 98%;
    height: inherit;
    margin: 0 auto;

    .general-card {
      height: 100%;
      padding: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius: 10px;

      .general-top {
        display: flex;
        justify-content: space-around;
        min-height: 202px;
        margin: 0 -12px;
        overflow: hidden;
        background-image: url('@/assets/images/step-head.png');
        background-size: 100% 100%;
      }

      .general-contain {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 75%;
        padding: 30px 0 10px 0;

        .tiny-layout {
          width: 100%;
          margin-left: 8%;
        }
      }

      .general-btn {
        position: relative;
        margin: 0 auto;

        button {
          width: 100px;
          height: 36px;
          border-radius: 4px;
        }
      }

      .col {
        padding: 4px 0;
        color: #fff;
      }
    }
  }
</style>
